<template>
  <div class="bigs">
    <div class="one">
      <h3>新增确诊top10</h3>
      <div id="main" class="echs"></div>
    </div>
    <div class="one">
        <div id="mainn" class="echs"></div>
    </div>
    <div class="one">
         <div id="mains" class="echs"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    render1() {
     var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "35%",
        right: "10%",
        left: "15%",
        bottom: "15%",
      },
      xAxis: [
        {
          type: "category",
          data: [
            "工作票",
            "操作票",
            "抢修",
            "用电调查",
            "设备巡视",
            "现场勘查",
            "到岗到位",
            "yyy",
            "gmhsb",
            "yyy",
          ],
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.12)",
            },
          },
          axisLabel: {
            margin: 10,
            color: "#e2e9ff",
            textStyle: {
              fontSize: 14,
            },
          },
        },
      ],
      yAxis: [
        {
          axisLabel: {
            formatter: "{value}",
            color: "#e2e9ff",
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.12)",
            },
          },
        },
      ],
      series: [
        {
          type: "bar",
          data: [300, 450, 770, 203, 255, 188, 156],
          barWidth: "12px",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,244,255,1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,77,167,1)", // 100% 处的颜色
                  },
                ],
                false
              ),
              barBorderRadius: [30, 30, 30, 30],
              shadowColor: "rgba(0,160,221,1)",
              shadowBlur: 4,
            },
          },
          label: {
            normal: {
              show: true,
              lineHeight: 30,
              width: 80,
              height: 30,
              backgroundColor: "rgba(0,160,221,0.1)",
              borderRadius: 200,
              position: ["-8", "-60"],
              distance: 1,
              formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(","),
              rich: {
                d: {
                  color: "#3CDDCF",
                },
                a: {
                  color: "#fff",
                  align: "center",
                },
                b: {
                  width: 1,
                  height: 30,
                  borderWidth: 1,
                  borderColor: "#234e6c",
                  align: "left",
                },
              },
            },
          },
        },
      ],
    };
    option && myChart.setOption(option);
},
render2(){
    var chartDoms = document.getElementById("mainn");
    var myCharts = echarts.init(chartDoms);
    window.addEventListener("resize", function () {
      myCharts.resize();
    });
    var options;

    options = {
      title: {
        text: "Temperature Change in the Coming Week",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {},
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: "none",
          },
          dataView: { readOnly: false },
          magicType: { type: ["line", "bar"] },
          restore: {},
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
        axisLabel: {
          formatter: "{value} °C",
        },
      },
      series: [
        {
          name: "Highest",
          type: "line",
          data: [10, 11, 13, 11, 12, 12, 9],
          markPoint: {
            data: [
              { type: "max", name: "Max" },
              { type: "min", name: "Min" },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "Avg" }],
          },
        },
        {
          name: "Lowest",
          type: "line",
          data: [1, -2, 2, 5, 3, 2, 0],
          markPoint: {
            data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }],
          },
          markLine: {
            data: [
              { type: "average", name: "Avg" },
              [
                {
                  symbol: "none",
                  x: "90%",
                  yAxis: "max",
                },
                {
                  symbol: "circle",
                  label: {
                    position: "start",
                    formatter: "Max",
                  },
                  type: "max",
                  name: "最高点",
                },
              ],
            ],
          },
        },
      ],
    };

    options && myCharts.setOption(options);
},
render3(){
    var chartDom1 = document.getElementById('mains');
var myChart1 = echarts.init(chartDom1);
    window.addEventListener("resize", function () {
      myChart1.resize();
    });
var option1;

option1 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

option1 && myChart1.setOption(option1);

}
  },
  created() {},

  mounted() {
   this.render1() 
    this.render2()
    this.render3()
  },
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.bigs {
  display: flex;
  flex-direction: column;
  //y轴
  .one {
    // width: 100%;
    height: 305px;
    // background-color: #ccc;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    h3 {
      color: #fff;
      font-weight: normal;
      text-align: center;
    }
    .echs {
      width: 100%;
      height: 85%;
    //   background-color: #fff;
    }
  }
}
</style>
